<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="./css/baseCss.css">
	<link rel="stylesheet" type="text/css" href="./css/courseDetail.css">
	<title>试卷</title>
	<style type="text/css">
		.examPaper_score{
			float: right;
			color: #397ab7;
		}
		
		.centerBgLight_text{
			width: 600px;
		}
		.videoLeft{
			float: none;
			width: 100%;
		}
		
		.video{
			margin-bottom: 0;
		}
		.paper{
			color: #353535;
    		font-size: 14px;
    		padding-left: 30px;
    		margin-bottom: 20px;
		}
		.paper_title{

		}
		.paper_list{
			margin: 15px 0;
		}
		.paper_eve{
			margin: 2px 0;
		}
		.paper_eveSel{
			vertical-align: middle;
		}
		.paper_answer{

		}
		.redColor{
			font-weight: 600;
			color: #f63658;
		}
		
		.whiteBtn{
			color: #333333;
			background-color: #fff;
			border: 1px solid #999999;
		}

		/*窗口样式*/
		.warnLight{
			position: fixed;
    		background-color: #fff;
    		left: 0;
    		right: 0;
    		top: 200px;
    		z-index: 2;
    		width: 600px;
    		margin: 0 auto;
    		text-align: center;
    		border-radius: 5px;
    		padding-top: 20px;
    		display: none;
		}
		.warnLight button{
			display: inline-block;
    		width: 200px;
		}
	</style>
</head>

<body>
	<div id="example">
		<all-header></all-header>
		<section>
			<div class="centerBg">
				<img class="imgBai" src="./img/bg02.png">
				<div class="centerBgLight">
					<div class="centerBgLight_img"><img class="imgBai" src="./img/light01.jpg"></div>
					<div class="centerBgLight_text">
						<div class="centerBgLight_tit">
							{{courseDetail.name}}
							<span class="examPaper_score" v-if='courseDetail.score'>{{courseDetail.score}}分</span>
						</div>
						<div><span class="centerBgLight_logo">详细参数</span></div>
						<div class="centerBgLight_list">
							<div><div>授课讲师:&nbsp&nbsp&nbsp</div><div>{{courseDetail.teacherName}}</div></div>
							<div><div>教程程度:&nbsp&nbsp&nbsp</div><div>{{levelName}}</div></div>
							<div><div>所需基础:&nbsp&nbsp&nbsp</div><div>{{courseDetail.basics}}</div></div>
						</div>
						<div class="centerBgLight_proInc">
							<!-- <div>
								<span>学习</span>
								<div class="centerBgLight_pro"><div class="centerBgLight_proBlue"></div></div>
								<span><span class="buleColor">{{percent}}</span>%</span>
							</div> -->
							<!-- <div class="centerBgLight_course">已完成:&nbsp&nbsp&nbsp{{courseDetail.completed}}/{{courseDetail.videos.length}}课时</div> -->
						</div>
					</div>
				</div>
			</div>

		</section>
		<section class="video">
			<div class="videoLeft">
				<div class="videoTitle">考试内容</div>
				<ul class="videoLeft_listInc" :data-tpid="tpid">
					<paper-list v-for="(tp,index) in tpQuestion" :index='index' :id='tp.id' :questionid='tp.questionId' :questionname='tp.questionName' :score='tp.score' :answer1='tp.answer1' :answer2='tp.answer2' :answer3='tp.answer3' :answer4='tp.answer4' :type='tp.type' :sort="tp.sort" :studentanswer='tp.studentAnswer'></paper-list>
				</ul>
			</div>
		</section>
		<section class="textCenter"><button class="blueBtn" @click='saveExam'>保存考试</button><button class="blueBtn whiteBtn" @click='commitTplogin'>提交试卷</button></section>

		<all-footer></all-footer>
		<div class="zhezhao" @click='zhezhao'></div>
		<div class="warnLight">
			<div class="warnLight_title">{{lighttit}}</div>
			 <!-- @click='commitTp' -->
			<div><button id="warnSure" class='blueBtn'>确定</button><button class='blueBtn whiteBtn' @click='zhezhao'>取消</button></div>
		</div>
	</div>
</body>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/httpUnit.js"></script>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript" src="./component/allHeader.js"></script>
<script type="text/javascript" src="./component/allFooter.js"></script>
<script type="text/javascript" src="./component/paper.js"></script>
<script type="text/javascript">

    paperVue();
    //Vue函数
    function paperVue() {

        var allheader = allHeader();
        var allfooter = allFooter();
        var paperlist = paper();
        var vm = new Vue({
            el: '#example',
            data: {
                courseDetail:"",
				level:"",
                percent:"",
                tpQuestion:"",
                tpid:"",
                sort:"",
                commitObj:"",//提交考试前的所有答案信息
                lighttit:"你的答案还没填写完，是否提交",//窗口标题
                
			},
			created:function(){
                // $(".centerBgLight_proBlue").width(this.precent+"%");
			},
            mounted:function(){
            	this.generateTp();
                // this.subjectDetail();
            },
			methods:{
				//生成试卷
				generateTp:function(){
                    var Request = this.GetRequest();
                    var id = Request['id'];
                    var obj = JSON.stringify({
                        "subjectId": id
                    });
                    httpHelperpost("/api/tps/generateTp", obj, function(isSuccess, data) {
                        if (isSuccess == true) {
                            var response = data.responseText;
                            var value = JSON.parse(response);

                            // console.log(response);

                            if(value.code == 0){
                                console.log("查询成功");
								vm.tpQuestion = value.data.tpQuestion;
								vm.courseDetail = value.data.subjectInfo;

								if(value.data.tpQuestion==""||value.data.tpQuestion==undefined||value.data.tpQuestion==null){

								}else{
									vm.tpid = value.data.tpQuestion[0].tpId;
									vm.sort = value.data.tpQuestion[0].sort;
								}
								
								
                            }else if(value.code==401){
                                alert(value.message);
                                window.location.href='./login.html';
                            }else{
                                alert(value.message);
                                console.log("查询失败");
                                window.location.href="./exam.html";
                            }
                        }else {}
                    });
				},
				//保存考试按钮
				saveExam:function(){
					var obj =[];
					var curPaper ="";
					var curanswer = "";
					for(var i=0,len=$(".videoLeft_listInc > .paper").length;i<len;i++){
						curPaper = $(".videoLeft_listInc > .paper").eq(i);
						curanswer = curPaper.find(".redColor").attr("data-val");
						if(curanswer=="A"||curanswer=="B"||curanswer=="C"||curanswer=="D"){
							
						}else{
							curanswer = "";
						}
						obj.push({id:curPaper.attr("data-id"),questionId:curPaper.attr("data-questionId"),studentAnswer:curanswer,tpId:$(".videoLeft_listInc").attr("data-tpid"),status:2});
					}
					obj = JSON.stringify(obj);
                    httpHelperpost("/api/tpQuestionUsers/saveExam", obj, function(isSuccess, data) {
                        if (isSuccess == true) {
                            var response = data.responseText;
                            var value = JSON.parse(response);

                            console.log(response);

                            if(value.code == 0){
                                console.log("查询成功");
								alert(value.message);
								window.location.href="./exam.html";
                            }else if(value.code==401){
                                alert(value.message);
                                window.location.href='./login.html';
                            }else{
                                alert(value.message);
                                console.log("查询失败");
                            }
                        }else {}
                    });
				},
				//考试--提交考试逻辑
				commitTplogin:function(){
					var answerisNull = false;

					var obj =[];
					var curPaper ="";
					var curanswer = "";
					for(var i=0,len=$(".videoLeft_listInc > .paper").length;i<len;i++){
						curPaper = $(".videoLeft_listInc > .paper").eq(i);
						curanswer = curPaper.find(".redColor").attr("data-val");
						if(curanswer=="A"||curanswer=="B"||curanswer=="C"||curanswer=="D"){
						}else{
							curanswer = "";
							answerisNull = true;
						}
						obj.push({id:curPaper.attr("data-id"),questionId:curPaper.attr("data-questionId"),studentAnswer:curanswer,tpId:$(".videoLeft_listInc").attr("data-tpid"),status:3});
					}
					obj = JSON.stringify(obj);
					this.commitObj = obj;
					if(answerisNull==true){
						this.zhezhao();
						this.lighttit = "你的答案还没填写完，是否提交";

						
						$("#warnSure").click(function(){
							vm.commitTp(answerisNull);
						});
					}else{
						this.commitTp(answerisNull);
					}
				},
				//考试--提交考试
				commitTp:function(answerisNull){
					$("#warnSure").unbind("click");
					var obj= this.commitObj;
                    httpHelperpost("/api/tpQuestionUsers/commitTp", obj, function(isSuccess, data) {
                        if (isSuccess == true) {
                            var response = data.responseText;
                            var value = JSON.parse(response);

                            console.log(response);

                            if(value.code == 0){
                                console.log("查询成功");
								alert(value.message);
								if(answerisNull==false){
									vm.zhezhao();
								}
								vm.lighttit = "试卷提交成功，您的分数是"+value.data+"分,是否跳转到考试中心页面?";
								$("#warnSure").click(function(){
									window.location.href="./exam.html";
								});
								
                            }else if(value.code==401){
                                alert(value.message);
                                window.location.href='./login.html';
                            }else{
                                alert(value.message);
                                console.log("查询失败");
                            }
                        }else {}
                    });
				},
				//遮罩层函数
				zhezhao:function(){
					if($(".zhezhao").css("display")=="none"){
						$(".zhezhao").css("display","block");
						$(".warnLight").css("display","block");
					}else{
						$(".zhezhao").css("display","none");
						$(".warnLight").css("display","none");
					}
				},
                GetRequest:function () {
            		var url = location.search; //获取url中"?"符后的字串
            		var theRequest = new Object();
            		if (url.indexOf("?") != -1) {
                		var str = url.substr(1);
                		strs = str.split("&");
                		for (var i = 0; i < strs.length; i++) {
                    		theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
                		}
            		}
            		return theRequest;
        		}
			},
            computed:{
              	levelName:function () {
					if(this.courseDetail.level==1){
					    return "入门";
					}else if(this.courseDetail.level==2){
                        return "进阶";
					}else if(this.courseDetail.level==3){
                        return "高级";
                    }
                }
			},
            components: {
                'all-header': allheader,
                'all-footer': allfooter,
                'paper-list': paperlist
            }
        })
    }
</script>
</html>